<template>
  <div>
    <van-nav-bar title="待收货" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <div v-for="item in dispatchedItems" :key="item.id" class="item">
        <van-checkbox v-model="item.checked" class="checkbox" />
        <img :src="item.image" class="item-image" />
        <div class="item-details">
          <div class="item-name">{{ item.name }}</div>
          <div class="item-quantity">数量：{{ item.quantity }}</div>
          <div class="item-price">价格：¥{{ item.price }}</div>
          <van-button type="primary" @click="viewLogistics" class="logistics-button">查看物流</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useOrderStore } from '../../store/order';
import { useRouter } from 'vue-router';

const store = useOrderStore();
const dispatchedItems = ref(store.dispatchedItems);
const router = useRouter();

const onClickLeft = () => {
  history.back();
};

const viewLogistics = () => {
  router.push('/logistics');
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #f5f5f5;
}

.item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 16px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.checkbox {
  margin-right: 16px;
}

.item-image {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 8px;
  object-fit: cover;
}

.item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name, .item-quantity, .item-price {
  margin-bottom: 8px;
}

.logistics-button {
  align-self: flex-end;
  margin-top: 8px;
}

.van-button.van-button--primary {
  background-color: #1989fa;
  border-color: #1989fa;
}
</style>
